<template>
  <div class="app-container">
    <div class="filter-container">
      <el-date-picker
        v-model="listQuery.date"
        type="date"
        placeholder="请选择日期"
        class="filter-item"
        :clearable="false"
      ></el-date-picker>
      <el-input
        v-model="listQuery.materialNo"
        placeholder="请输入物料号"
        style="width: 200px;"
        class="filter-item"
      /> 
      <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">查询</el-button>
      <el-button class="filter-item" type="info" icon="el-icon-refresh" @click="handleReset">重置</el-button>
    </div>
    <el-row class="headerContainer">
      <el-table ref="headTable" :data="emptyList" border fit highlight-current-row>
        <el-table-column align="center" label="车型" prop="vehicleType" />
        <el-table-column min-width="100px" align="center" label="物料号" prop="materialNo" />
        <el-table-column min-width="100px" align="center" label="物料描述" prop="materialDesc" />
        <el-table-column align="center" label="年累计">
          <el-table-column align="center" label="焊装20" prop="yearWelding" />
          <el-table-column align="center" label="涂装20" prop="yearPainting" />
          <el-table-column align="center" label="总装30" prop="yearAssembly" />
        </el-table-column>
        <el-table-column align="center" label="月累计">
          <el-table-column align="center" label="焊装20" prop="monthWelding" />
          <el-table-column align="center" label="涂装20" prop="monthPainting" />
          <el-table-column align="center" label="总装30" prop="monthAssembly" />
        </el-table-column>
        <el-table-column align="center" label="日累计">
          <el-table-column align="center" label="焊装20" prop="dayWelding" />
          <el-table-column align="center" label="涂装20" prop="dayPainting" />
          <el-table-column align="center" label="总装30" prop="dayAssembly" />
        </el-table-column>
        <div slot="empty">
          <div style="height:0"></div>
        </div>
      </el-table>
    </el-row>
    
    <!-- :show-header="index === 0" -->
    <el-row style="height:400px;overflow-y:auto;overflow-x: auto;">
      <div ref="scrollContainer">
        <el-table
        v-for="(list, index) in lists"
        :key="index"
        :data="list"
        element-loading-text="Loading"
        border
        fit
        highlight-current-row
        :span-method="arraySpanMethod"
        show-summary
        :show-header="false"
        style="width:100%"
      >
        <el-table-column align="center" label="车型" prop="vehicleType" />
        <el-table-column min-width="100px" align="center" label="物料号" prop="materialNo" />
        <el-table-column min-width="100px" align="center" label="物料描述" prop="materialDesc" />
        <el-table-column align="center" label="年累计">
          <el-table-column align="center" label="焊装20" prop="yearWelding" />
          <el-table-column align="center" label="涂装20" prop="yearPainting" />
          <el-table-column align="center" label="总装30" prop="yearAssembly" />
        </el-table-column>
        <el-table-column align="center" label="月累计">
          <el-table-column align="center" label="焊装20" prop="monthWelding" />
          <el-table-column align="center" label="涂装20" prop="monthPainting" />
          <el-table-column align="center" label="总装30" prop="monthAssembly" />
        </el-table-column>
        <el-table-column align="center" label="日累计">
          <el-table-column align="center" label="焊装20" prop="dayWelding" />
          <el-table-column align="center" label="涂装20" prop="dayPainting" />
          <el-table-column align="center" label="总装30" prop="dayAssembly" />
        </el-table-column>
      </el-table>
      </div>
      
    </el-row>
  </div>
</template>
<style lang="scss" scoped>
  // ::-webkit-scrollbar {
  //   width: 0
  // }
  // .scroll-container {
  //   width: 1348px;
  // }
  .headerContainer {
    height: 88px;
    overflow-x: auto;
    overflow-y: hidden;
  }
</style>
<script>
import { fetchList } from "@/api/production/production-daily";
import waves from "@/directive/waves"; // waves directive
import underscore from "underscore";
import { parseTime } from "@/utils";

export default {
  name: "ProductionDaily",
  directives: { waves },
  data() {
    return {
      // 查询
      listQuery: {
        date: new Date(),
        materialNo: undefined
      },
      // 模拟表头
      emptyList: [],
      // 表格
      baseList: null,
      lists: null,
      listLoading: false
    };
  },
  created() {
    this.fetchData();
  },
  mounted() {
    this.$refs.scrollContainer.style.width = Number(this.$refs.headTable.bodyWidth.split('p')[0]) + 1 + 'px'
  },
  methods: {
    fetchData() {
      this.listLoading = true;
      fetchList(parseTime(this.listQuery.date, "{y}-{m}-{d}")).then(res => {
        this.baseList = res.data;
        if (!this.listQuery.materialNo) {
          this.lists = underscore.values(
            underscore.groupBy(this.baseList, a => a.vehicleType)
          );
        } else {
          if (this.baseList.filter(a => a.materialNo === this.listQuery.materialNo).length === 0) {
            this.$message.warning('查询的物料号不存在！')
            this.lists = []
          } else {
            this.lists = underscore.values(
              underscore.groupBy(this.baseList.filter(a => a.materialNo === this.listQuery.materialNo), a => a.vehicleType)
            );
          }
        }
        this.listLoading = false;
      });
    },
    arraySpanMethod({ row, column, rowIndex, columnIndex }, list) {
      if (columnIndex === 0) {
        if (rowIndex === 0) {
          return [
            underscore.groupBy(this.baseList, a => a.vehicleType)[
              row.vehicleType
            ].length,
            1
          ];
        } else {
          return [0, 0];
        }
      }
    },
    handleFilter() {
      this.fetchData();
    },
    handleReset() {
      this.listQuery = {
        date: new Date(),
        materialNo: undefined
      };
    }
  }
};
</script>
